<template>
  <a-select
      v-model:value="value"
      show-search
      placeholder="选择角色"
      option-filter-prop="children"
      option-label-prop="label"
      @change="handleChange"
  >
    <a-select-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name">
      {{item.name}}
    </a-select-option>
  </a-select>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, computed} from 'vue'
import {roleList} from '@/api/user'
import {Select, Pagination, Divider} from 'ant-design-vue'

export default defineComponent({
  name: "select-roles",
  props: ['modelValue'],
  components: {
    [Select.name]: Select, VNodes: (_, {attrs}) => attrs.vnodes, 'a-select-option': Select.Option, [Divider.name]: Divider, [Pagination.name]: Pagination
  },
  setup(props, {emit}) {

    const state = reactive({
      list: [] as any[],
      value: [props.modelValue]
    })

    roleList({page: 1,limit: 1000}).then(res => state.list = res.data)

    const handleChange = (value) => {
      emit('update:modelValue', value.toString())
    }

    return {
      ...toRefs(state),
      handleChange,
    }
  }
})
</script>
